<template>
    <div class="play-all">
        <i class="icon iconfont icon-play" @click="all"></i>
        <span class="text" @click="all">全部播放（{{songs.length}}）</span>
    </div>
</template>

<script type="text/ecmascript-6">
    import { mapActions } from 'vuex'
    export default {
        name: 'play-all',
        props: {
            songs: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        methods: {
            all() {
                this.playAll({
                    list: this.songs
                })
            },
            ...mapActions([
                'playAll'
            ])
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    .play-all
        padding: 12px 25px
        margin-bottom: 15px
        background: $color-background
        .icon
            display: inline-block
            margin-right: 5px
            vertical-align: middle
            font-size: $font-size-large-x
            color: $color-theme
        .text
            vertical-align: middle
            line-height: 22px
            font-size: $font-size-medium
</style>